<template>
    <view class="m-time-down">
        <view class="m-time-down-item"></view>
        <view class="m-time-down-item"></view>
        <view class="m-time-down-item"></view>
    </view>
</template>

<script lang="ts" setup>
import TimeDown from '@/util/TimeDown'
import { onBeforeUnmount, watch, ref } from 'vue'
const props = defineProps({
    time: { type: Number, default: false }
})
const emit = defineEmits(['timeEnd'])
const houritem = ref('00')
const minuteitem = ref('00')
const seconditem = ref('00')
let timeDown = new TimeDown(props.time, (hour, minute, second) => {
    houritem.value = hour.toString().padStart(2, '0')
    minuteitem.value = minute.toString().padStart(2, '0')
    seconditem.value = second.toString().padStart(2, '0')
    if (hour == 0 && minute == 0 && second == 0) {
        emit('timeEnd')
    }
})
watch(
    () => props.time,
    (v) => {
        timeDown.reset(v)
    }
)
onBeforeUnmount(() => {
    timeDown.stop()
})
</script>

<style lang="scss" scoped>
.m-home-miaosha-time-item {
    padding: $uni-spacing-col-sm;
    font-size: $uni-font-size-sm;
    background-color: red;
    margin: 0 $uni-spacing-row-sm;
    border-radius: $uni-border-radius-lg;
}
.m-time-down {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
</style>
